<template>
  <div class="axiom-date-picker">
    <label v-if="label" class="axiom-date-picker__label">
      {{ label }}
      <span v-if="required" class="axiom-date-picker__required">*</span>
    </label>
    <el-date-picker
      v-bind="$attrs"
      class="axiom-date-picker__field"
      :class="{ 'axiom-date-picker__field--error': error }"
      :model-value="modelValue"
      @update:modelValue="emit('update:modelValue', $event)"
      @change="emit('change', $event)"
      @blur="emit('blur', $event)"
      @focus="emit('focus', $event)"
      @calendar-change="emit('calendar-change', $event)"
      @panel-change="emit('panel-change', $event)"
      @visible-change="emit('visible-change', $event)"
      :type="type"
      :placeholder="placeholder"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :disabled="disabled"
      :clearable="clearable"
      :readonly="readonly"
      :editable="editable"
      :size="size"
      :format="format"
      :value-format="valueFormat"
      :disabled-date="disabledDate"
      :shortcuts="shortcuts"
      :default-value="defaultValue"
      :default-time="defaultTime"
      :range-separator="rangeSeparator"
      :popper-class="popperClass"
      :unlink-panels="unlinkPanels"
      :prefix-icon="prefixIcon"
      :clear-icon="clearIcon"
      :validate-event="validateEvent"
      :teleported="teleported"
    />
    <div v-if="error" class="axiom-date-picker__error">{{ error }}</div>
    <div v-if="helpText && !error" class="axiom-date-picker__help">{{ helpText }}</div>
  </div>
</template>

<script setup>
import { Calendar } from '@element-plus/icons-vue';

defineOptions({
  name: 'AxiomDatePicker',
  inheritAttrs: false
});

defineProps({
  label: { type: String, default: '' },
  required: { type: Boolean, default: false },
  type: { type: String, default: 'date', validator: (value) => ['year', 'month', 'date', 'dates', 'datetime', 'week', 'datetimerange', 'daterange', 'monthrange'].includes(value) },
  placeholder: { type: String, default: '选择日期' },
  startPlaceholder: { type: String, default: '开始日期' },
  endPlaceholder: { type: String, default: '结束日期' },
  disabled: { type: Boolean, default: false },
  clearable: { type: Boolean, default: true },
  readonly: { type: Boolean, default: false },
  editable: { type: Boolean, default: true },
  size: { type: String, default: 'default', validator: (value) => ['large', 'default', 'small'].includes(value) },
  format: { type: String, default: 'YYYY-MM-DD' },
  valueFormat: { type: String, default: 'YYYY-MM-DD' },
  disabledDate: { type: Function, default: undefined },
  shortcuts: { type: Array, default: () => [] },
  defaultValue: { type: [Date, Array], default: undefined },
  defaultTime: { type: [Date, Array], default: undefined },
  rangeSeparator: { type: String, default: '至' },
  popperClass: { type: String, default: '' },
  unlinkPanels: { type: Boolean, default: false },
  prefixIcon: { type: [String, Object], default: () => Calendar },
  clearIcon: { type: [String, Object], default: undefined },
  validateEvent: { type: Boolean, default: true },
  teleported: { type: Boolean, default: true },
  error: { type: String, default: '' },
  helpText: { type: String, default: '' },
  modelValue: { type: [String, Date, Array], default: undefined }
});

const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'calendar-change', 'panel-change', 'visible-change']);
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-date-picker';
</style>